<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>创建快递订单</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回列表</el-button>
      </div>
      
      <el-form ref="orderForm" :model="orderForm" :rules="rules" label-width="120px" class="order-form">
        <h3>基本信息</h3>
        <el-divider></el-divider>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物流公司" prop="logistics_company_id">
              <el-select v-model="orderForm.logistics_company_id" placeholder="请选择物流公司" style="width: 100%">
                <el-option
                  v-for="item in logisticsCompanies"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保险方案" prop="insurance_coverage_id">
              <el-select v-model="orderForm.insurance_coverage_id" placeholder="请选择保险方案" style="width: 100%">
                <el-option
                  v-for="item in insuranceCoverages"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
                <el-option key="0" label="不需要保险" :value="null" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <h3>寄件人信息</h3>
        <el-divider></el-divider>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="寄件人姓名" prop="sender_name">
              <el-input v-model="orderForm.sender_name" placeholder="请输入寄件人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="寄件人电话" prop="sender_phone">
              <el-input v-model="orderForm.sender_phone" placeholder="请输入寄件人电话" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="寄件网点" prop="express_outlet_id">
              <el-select v-model="orderForm.express_outlet_id" placeholder="请选择寄件网点" style="width: 100%">
                <el-option
                  v-for="item in expressOutlets"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="寄件地址" prop="sender_address">
              <el-input v-model="orderForm.sender_address" placeholder="请输入详细地址" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <h3>收件人信息</h3>
        <el-divider></el-divider>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收件人姓名" prop="receiver_name">
              <el-input v-model="orderForm.receiver_name" placeholder="请输入收件人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收件人电话" prop="receiver_phone">
              <el-input v-model="orderForm.receiver_phone" placeholder="请输入收件人电话" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="目的网点" prop="destination_outlet_id">
              <el-select v-model="orderForm.destination_outlet_id" placeholder="请选择目的网点" style="width: 100%">
                <el-option
                  v-for="item in expressOutlets"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收件地址" prop="receiver_address">
              <el-input v-model="orderForm.receiver_address" placeholder="请输入详细地址" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <h3>物品信息</h3>
        <el-divider></el-divider>
        
        <div v-for="(item, index) in orderForm.items" :key="index" class="item-container">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item :label="index === 0 ? '物品' : ''" :prop="'items.' + index + '.item_id'" :rules="{ required: true, message: '请选择物品', trigger: 'change' }">
                <el-select v-model="item.item_id" placeholder="请选择物品" style="width: 100%">
                  <el-option
                    v-for="option in items"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="index === 0 ? '数量' : ''" :prop="'items.' + index + '.quantity'" :rules="{ required: true, message: '请输入数量', trigger: 'blur' }">
                <el-input-number v-model="item.quantity" :min="1" :max="100" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="index === 0 ? '重量(kg)' : ''" :prop="'items.' + index + '.weight'" :rules="{ required: true, message: '请输入重量', trigger: 'blur' }">
                <el-input-number v-model="item.weight" :min="0.1" :step="0.1" :precision="2" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="index === 0 ? '体积(m³)' : ''" :prop="'items.' + index + '.volume'" :rules="{ required: true, message: '请输入体积', trigger: 'blur' }">
                <el-input-number v-model="item.volume" :min="0.001" :step="0.001" :precision="3" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="index === 0 ? '申报价值' : ''" :prop="'items.' + index + '.declared_value'" :rules="{ required: true, message: '请输入申报价值', trigger: 'blur' }">
                <el-input-number v-model="item.declared_value" :min="0" :step="10" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="2" style="display: flex; align-items: center; margin-top: 10px;">
              <el-button v-if="index === 0" type="primary" icon="el-icon-plus" circle @click="addItem"></el-button>
              <el-button v-else type="danger" icon="el-icon-delete" circle @click="removeItem(index)"></el-button>
            </el-col>
          </el-row>
        </div>
        
        <h3>备注信息</h3>
        <el-divider></el-divider>
        
        <el-form-item label="订单备注">
          <el-input v-model="orderForm.remark" type="textarea" :rows="3" placeholder="请输入订单备注信息" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交订单</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { http } from '@/api'

export default {
  name: 'CreateOrder',
  data() {
    return {
      orderForm: {
        logistics_company_id: null,
        insurance_coverage_id: null,
        sender_name: '',
        sender_phone: '',
        sender_address: '',
        express_outlet_id: null,
        receiver_name: '',
        receiver_phone: '',
        receiver_address: '',
        destination_outlet_id: null,
        remark: '',
        items: [
          {
            item_id: null,
            quantity: 1,
            weight: 1,
            volume: 0.001,
            declared_value: 0
          }
        ]
      },
      rules: {
        logistics_company_id: [{ required: true, message: '请选择物流公司', trigger: 'change' }],
        sender_name: [{ required: true, message: '请输入寄件人姓名', trigger: 'blur' }],
        sender_phone: [
          { required: true, message: '请输入寄件人电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        sender_address: [{ required: true, message: '请输入寄件地址', trigger: 'blur' }],
        express_outlet_id: [{ required: true, message: '请选择寄件网点', trigger: 'change' }],
        receiver_name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
        receiver_phone: [
          { required: true, message: '请输入收件人电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        receiver_address: [{ required: true, message: '请输入收件地址', trigger: 'blur' }],
        destination_outlet_id: [{ required: true, message: '请选择目的网点', trigger: 'change' }]
      },
      logisticsCompanies: [],
      expressOutlets: [],
      insuranceCoverages: [],
      items: []
    }
  },
  created() {
    this.getLogisticsCompanies()
    this.getExpressOutlets()
    this.getInsuranceCoverages()
    this.getItems()
  },
  methods: {
    getLogisticsCompanies() {
      http.logisticsCompany.simpleList().then(response => {
        this.logisticsCompanies = response.data.rows
      })
    },
    getExpressOutlets() {
      http.expressOutlet.simpleList().then(response => {
        this.expressOutlets = response.data.rows
      })
    },
    getInsuranceCoverages() {
      http.insuranceCoverage.simpleList().then(response => {
        this.insuranceCoverages = response.data.rows
      })
    },
    getItems() {
      http.item.simpleList().then(response => {
        this.items = response.data.rows
      })
    },
    addItem() {
      this.orderForm.items.push({
        item_id: null,
        quantity: 1,
        weight: 1,
        volume: 0.001,
        declared_value: 0
      })
    },
    removeItem(index) {
      this.orderForm.items.splice(index, 1)
    },
    submitForm() {
      this.$refs.orderForm.validate((valid) => {
        if (valid) {
          // 创建订单
          http.expressOrder.createOrder(this.orderForm).then(response => {
            this.$notify({
              title: '成功',
              message: '订单创建成功',
              type: 'success',
              duration: 2000
            })
            // 跳转到订单详情页
            this.$router.push({ path: '/order/detail', query: { id: response.data.id }})
          })
        } else {
          this.$message.error('请完善表单信息')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.orderForm.resetFields()
      this.orderForm.items = [
        {
          item_id: null,
          quantity: 1,
          weight: 1,
          volume: 0.001,
          declared_value: 0
        }
      ]
    },
    goBack() {
      this.$router.push('/order/list')
    }
  }
}
</script>

<style scoped>
.order-form {
  margin-top: 20px;
}
.item-container {
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px dashed #ebeef5;
}
h3 {
  margin-top: 20px;
  font-weight: 500;
  color: #303133;
}
</style>
